<div class="page">
    <div class="main">
        <div class="step">
            <div class="done done2">
                <img src="../../../../../assets/images/done.png"><span>模板配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>数据集配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型配置</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型训练</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>模型评估</span>
            </div>
            <div class="done done3">
                <img src="../../../../../assets/images/done.png"><span>应用评估</span>
            </div>
            <div class="done done1">
                <img src="../../../../../assets/images/run.png"><span>模型部署</span>
            </div>
        </div>
        <div class="top_line"><img src="../../../../../assets/images/arrow.jpg" class="top_arrow"></div>
        <div class="context" *ngIf="state == 0">            
            <div class="panel-title">模型部署</div>
            <div class="row-item">
                <div class="row-item-title">资源池</div>
                <div class="row-item-ctx">
                    <span>V1</span>&nbsp;&nbsp;更新至&nbsp;&nbsp;<span>V2</span>
                </div>
            </div>
            <div class="row-item">
                <div class="row-item-title">服务名称</div>
                <div class="row-item-ctx">
                    <input type="text" nz-input placeholder="请输入服务名称" />
                </div>
            </div>
            <div class="row-item" style="height: 140px;">
                <div class="row-item-title">描述</div>
                <div class="row-item-ctx" style="height: 140px;">
                    <textarea nz-input placeholder="描述"></textarea>
                </div>
            </div>
            <div class="row-item line">
                <div class="row-item-title">资源池</div>
                <div class="row-item-ctx">
                    <nz-radio-group [(ngModel)]="radioValue">
                        <label nz-radio nzValue="公共资源池">公共资源池</label>
                        <label nz-radio nzValue="专属资源池">专属资源池</label>
                    </nz-radio-group>
                </div>
            </div>
            <div class="row-item">
                <div class="row-item-title">计算节点规格&nbsp;&nbsp;<i nz-icon nzType="question-circle" nzTheme="outline"></i></div>
                <div class="row-item-ctx">
                    <input type="text" nz-input placeholder="请输入服务名称" />
                </div>
            </div>
            <div class="row-item">
                <div class="row-item-title">计算节点个数</div>
                <div class="row-item-ctx">
                    <nz-input-number></nz-input-number>
                </div>
            </div>
            <div class="row-item">
                <div class="row-item-title">服务自动停止</div>
                <div class="row-item-ctx">
                    <nz-radio-group [(ngModel)]="radioTimeValue">
                        <label nz-radio nzValue="0">否</label>
                        <label nz-radio nzValue="1">1小时</label>
                        <label nz-radio nzValue="2">2小时</label>
                        <label nz-radio nzValue="3">4小时</label>
                        <label nz-radio nzValue="4">5小时</label>
                        <label nz-radio nzValue="5">自定义时间</label>
                    </nz-radio-group>
                    <input *ngIf="radioTimeValue == 5" type="text" style="width: 120px;" nz-input placeholder="请输入自定义时间" />
                </div>
            </div>
            <div class="row-item">
                <div class="row-item-title"></div>
                <div class="row-item-ctx subtitle">
                    服务的运行状态将在您所选择的时间点之后，自动停止。同时服务停止计费。
                </div>
            </div>
           
        </div>
        <div class="context" *ngIf="state > 0">            
            <div class="panel-title">模型部署</div>
            <div class="tabCtx">
                <div class="tab-main" *ngIf="state==1">   
                    <div class="tips-img"><img src="../../../../../assets/images/runing.png"></div>
                    <div class="tips-title">服务部署中....</div>    
                    <div class="tips">您的服务正在部署，请稍候</div>                                
                                   
                </div>
                <div class="tab-main" *ngIf="state==2">
                    <div style="margin-top: 150px;">
                        <div class="tips-err">模型部署失败<div class="tips-img-err"><img src="../../../../../assets/images/err.png"></div></div>
                        <div class="tips"><span>失败原因:</span>&nbsp;&nbsp;<span style="color: #f66f6a;">服务部署失败原因</span></div>
                        <div><button nz-button nzType="defalut" >修改配置</button>&nbsp;&nbsp;<button class="btnRetry" nz-button nzType="defalut" >重试</button></div>   
                    </div> 
                </div>
                <div class="tab-main" *ngIf="state==3">
                    <div style="margin-top: 150px;">
                        <div class="tips-err">模型部署成功<div class="tips-img-err"><img src="../../../../../assets/images/fin.png"></div></div>
                        <div class="tips-suc" style="margin-top: 8px;"><div class="span-title">服务名称</div><span>ABC00010</span></div>
                        <div class="tips-suc"><div class="span-title">API</div><span>https://100.95.150.197:8001/v...</span>&nbsp;&nbsp;<span style="color: #526ecc;">复制</span></div>
                        <div style="margin-top: 10px;"><button class="btnView" nz-button nzType="defalut" >查看应用监控</button></div>   
                    </div>                       
                </div>                
            </div>
           
        </div>
    </div>
    <div class="bottom">
        <div class="remark">
            <p>部署费用：<span style="color: #de5250;font-size: 16px;">￥0.80/小时</span></p>
            <p>参考价格，具体扣费请以账单为准。<span style="color: #526ecc;">了解计费详情</span></p>
        </div>
        <button nz-button nzType="defalut" class="prebutton" (click)="return()">上一步</button>
        <button nz-button class="nextbutton" nzType="primary" (click)="deploy()">部署</button>
    </div>
</div>
